<template>
  <div class="danceKinds">
    <!--    功能区域-->
    <div style="margin: 10px 20px">
      <el-button type="primary" @click="add">添加</el-button>
<!--      <el-button type="primary">导入</el-button>-->
<!--      <el-button type="primary">导出</el-button>-->
<!--      <el-input v-model="search" placeholder="请输入关键字" style="width: 20%; margin-left:50px;" clearable/>-->
<!--      <el-button type="primary" style="margin-left: 10px" @click="load">查询</el-button>-->

    </div>

    <!--    表格-->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="ID" width="120"/>
      <el-table-column prop="title" label="舞种名称" width="140"/>
      <el-table-column prop="content" label="内容" width="650"/>
      <el-table-column prop="image" label="图片" width="300">
        <template #default="scope">
          <el-image
              style="width: 150px; height: 100px"
              :src="scope.row.image"
              :preview-src-list="[scope.row.image]">
          </el-image>
        </template >
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <!--        <el-button type="text" size="large" @click="handleEdit(scope.row)">查看档案</el-button>-->
          <el-button type="text" size="large" @click="handleEdit(scope.row)">编辑</el-button>
          <el-popconfirm title="确认删除吗?" @confirm="handleDelete(scope.row.id)">
            <template #reference>
              <el-button type="text" size="large">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>


    <!--    弹出框-->
    <el-dialog v-model="dialogVisible" title="" width="30%">
      <el-form :model="form" label-width="120px">
        <el-form-item label="舞种名称">
          <el-input v-model="form.title" style="width: 80%"></el-input>
        </el-form-item>
      </el-form>
              <el-form :model="form" label-width="120px">
                <el-form-item label="内容">
                  <el-input type="textarea" v-model="form.content" style="width: 80%"></el-input>
                </el-form-item>
              </el-form>
            <el-form label-width="120px">
      <el-form-item label="图片">
        <el-upload ref="upload" :on-success="uploadSuccess" action="http://localhost:9090/files/upload">
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>
            </el-form>
<!--      <el-form-item label="轮播图">-->
<!--        <el-upload-->
<!--            action="http://localhost:9090/file/upload"-->
<!--            list-type="picture-card">-->
<!--          <i class="el-icon-plus"></i>-->
<!--        </el-upload>-->
<!--      </el-form-item>-->

      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="save">确定</el-button>
      </span>
      </template>
    </el-dialog>

    <div class="demo-pagination-block">
      <!--      <span class="demonstration">All combined</span>-->
      <el-pagination
          v-model:currentPage="currentPage4"
          :page-sizes="[5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>


<script>
import request from "@/utils/request";

export default {
  name: 'danceKinds',
  components: {},


  data() {
    return {
      search: '',
      form: {},
      dialogVisible: false,
      tableData: [],
      currentPage4: 1,
      pageSize: 10,
      total: 0,
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    }
  },

  created() {
    this.load()
  },

  methods: {
    uploadSuccess(res){
      console.log(res)
      this.form.image = res.data;

    },
    load() {
      request.get("/danceKinds/Query", {
        params: {
          pageNum: this.currentPage4,
          pageSize: this.pageSize,
          search: this.search
        }
      }).then(res => {
        res.data.records.forEach(v=>{
          console.log(v.image+"图片地址")
        })
        console.log(res.data.records+"测试=========");
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    // handleFile(id) {
    //   sessionStorage.setItem("id", id)//缓存id
    //   this.$router.push("/stuFile")
    // },
    handleEdit(row) {
      this.form = JSON.parse(JSON.stringify(row))
      this.dialogVisible = true
    },
    add() {
      this.dialogVisible = true
      this.form = {}
      if (this.$refs['upload']) {
        this.$refs['upload'].clearFiles()  // 清除历史文件列表
      }
    },
    save() {
      if (this.form.id) {
        request.put("/danceKinds", this.form).then(res => {
          console.log(res)
          if (res.code === '0') {
            this.$messageBox({
              type: "success",
              message: "更新成功"
            })
          } else {
            this.$messageBox({
              type: "error",
              message: res.msg
            })
          }
          this.load() //刷新表格的数据
          this.dialogVisible = false
        })
      } else {
        request.post("/danceKinds", this.form).then(res => {
          console.log(res)
          if (res.code === '0') {
            this.$messageBox({
              type: "success",
              message: "新增成功"
            })
          } else {
            this.$messageBox({
              type: "error",
              message: res.msg
            })
          }
          this.load() //刷新表格的数据
          this.dialogVisible = false
        })
      }
    },
    handleDelete(id) {
      console.log(id)
      request.delete("/danceKinds/" + id).then(res => {
        if (res.code === '0') {
          this.$messageBox({
            type: "success",
            message: "删除成功"
          })
        } else {
          this.$messageBox({
            type: "error",
            message: res.msg
          })
        }
        this.load()
      })
    },
    handleSizeChange(pageSize) {     //改变当前每页的个数触发
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {  //改变当前页码触发
      this.currentPage4 = pageNum
      this.load()
    },

  },
}


</script>

<style scoped>

</style>